<template>
  <div class="router-link-box">
    <div
      v-for="route of routes" :key="route.path" :class="{active:nowPath==route.path}"
      @click="router.replace(route.path)" class="router-link one-line"
    >
      {{ route.title }}
    </div>
  </div>
  <router-view class="view-page" v-slot="{ Component }">
    <!--    <keep-alive>-->
    <component :is="Component"/>
    <!--    </keep-alive>-->
  </router-view>
</template>
<script setup>
import router from "./router/index";
import {computed} from 'vue';
const routes = computed(() => router.options.routes);
const nowPath = computed(() => router.currentRoute.value.fullPath);
</script>
<style lang="scss">
#app {
  height: 100vh;
  width: 100vw;
  display: flex;
  .router-link-box {
    flex: 0 0 120px;
    line-height: 30px;
    font-size: 16px;
    color: #aaa;
    margin: 5px 5px 5px 0;
    border-right: 1px solid #0abde3;
    overflow-y: auto;
    .router-link {
      cursor: pointer;
      text-decoration: none;
      margin: 10px;
      text-align: center;
      transition: all .2s;
      border-radius: 4px;
      color: #409eff;
      &:hover {
        background-color: #ecf5ff;
      }
      &.active {
        color: #fff;
        background-color: #409eff;
      }
    }
  }
  .view-page {
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
}
</style>
